import QtQuick
import FluentUI
import QtQuick.Layouts
import QtQuick.Controls

FluRectangle {
    width: interviewWindow.width * 0.377
    height: interviewWindow.height
    color: "#FFFFFF"

    FluClip {
        y: parent.height * 0.1
        anchors.horizontalCenter: parent.horizontalCenter
        radius: [width / 2, width / 2, width / 2, width / 2]
        width: parent.height * 0.25
        height: parent.height * 0.25
        FluImage {
            id: fluimage
            anchors.fill: parent
            fillMode: Image.PreserveAspectFit
            source: "qrc:/image/image/HR.png"
        }
    }

    FluRectangle {
        y: parent.height * 0.4
        anchors.horizontalCenter: parent.horizontalCenter
        width: parent.width * 0.618
        height: parent.height * 0.4
        color: "transparent"

        Column {
            anchors.fill: parent
            spacing: parent.height * 0.05
            Text {
                text: "Hi！你好"
                font.pointSize: 12 * fontSizeFactor
                font.family: "MiSans"
                color: "#0A1629"
            }

            Text {
                text: "我是今天的面试官，面试即将开始"
                font.pointSize: 12 * fontSizeFactor
                font.family: "MiSans"
                color: "#0A1629"
            }

            // 功能区
            FluRectangle {
                width: parent.width
                height: parent.height * 0.4
                color: "transparent"

                Row {
                    anchors.fill: parent
                    spacing: parent.width * 0.05

                    // 休息一下
                    FluRectangle {
                        id: takeABreakRect
                        anchors.verticalCenter: parent.verticalCenter
                        width: parent.width * 0.3
                        height: parent.height * 0.618
                        radius: [10, 10, 10, 10]
                        color: "#EBF3FF"
                        Column {
                            anchors.fill: parent
                            // 占位
                            Rectangle {
                                width: parent.width
                                height: parent.height * 0.25
                                color: "transparent"
                            }
                            FluImage {
                                anchors.horizontalCenter: parent.horizontalCenter
                                height: parent.height * 0.2
                                fillMode: Image.PreserveAspectFit
                                source: "qrc:/image/image/TakeABreak.png"
                            }
                            // 占位
                            Rectangle {
                                width: parent.width
                                height: parent.height * 0.1
                                color: "transparent"
                            }
                            Text {
                                anchors.horizontalCenter: parent.horizontalCenter
                                text: "休息一下"
                                font.pointSize: 12 * fontSizeFactor
                                font.family: "MiSans"
                                color: "#0A1629"
                            }
                        }

                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            onEntered: {
                                takeABreakRect.scale = 1.1
                            }
                            onExited: {
                                takeABreakRect.scale = 1.0
                            }
                        }
                        // Q弹动画
                        Behavior on scale {
                            PropertyAnimation {
                                duration: 200
                                easing.type: Easing.OutBounce
                            }
                        }
                    }

                    // 记录知识点
                    FluRectangle {
                        id: recordKnowledgeRect
                        anchors.verticalCenter: parent.verticalCenter
                        width: parent.width * 0.3
                        height: parent.height * 0.618
                        radius: [10, 10, 10, 10]
                        color: "#B8CFFF"
                        Column {
                            anchors.fill: parent
                            // 占位
                            Rectangle {
                                width: parent.width
                                height: parent.height * 0.25
                                color: "transparent"
                            }
                            FluImage {
                                anchors.horizontalCenter: parent.horizontalCenter
                                height: parent.height * 0.2
                                fillMode: Image.PreserveAspectFit
                                source: "qrc:/image/image/RecordKnowledge.png"
                            }
                            // 占位
                            Rectangle {
                                width: parent.width
                                height: parent.height * 0.1
                                color: "transparent"
                            }
                            Text {
                                anchors.horizontalCenter: parent.horizontalCenter
                                text: "记录知识点"
                                font.pointSize: 10 * fontSizeFactor
                                font.family: "MiSans"
                                color: "#0A1629"
                            }
                        }

                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            onEntered: {
                                recordKnowledgeRect.scale = 1.1
                            }
                            onExited: {
                                recordKnowledgeRect.scale = 1.0
                            }
                        }
                        // Q弹动画
                        Behavior on scale {
                            PropertyAnimation {
                                duration: 200
                                easing.type: Easing.OutBounce
                            }
                        }
                    }

                    // 点赞
                    FluRectangle {
                        id: likeRect
                        anchors.verticalCenter: parent.verticalCenter
                        width: parent.width * 0.3
                        height: parent.height * 0.618
                        radius: [10, 10, 10, 10]
                        color: "#568CFB"
                        Column {
                            anchors.fill: parent
                            // 占位
                            Rectangle {
                                width: parent.width
                                height: parent.height * 0.25
                                color: "transparent"
                            }
                            FluImage {
                                anchors.horizontalCenter: parent.horizontalCenter
                                height: parent.height * 0.2
                                fillMode: Image.PreserveAspectFit
                                source: "qrc:/image/image/Like.png"
                            }
                            // 占位
                            Rectangle {
                                width: parent.width
                                height: parent.height * 0.1
                                color: "transparent"
                            }
                            Text {
                                anchors.horizontalCenter: parent.horizontalCenter
                                text: "点赞"
                                font.pointSize: 12 * fontSizeFactor
                                font.family: "MiSans"
                                color: "#0A1629"
                            }
                        }

                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            onEntered: {
                                likeRect.scale = 1.1
                            }
                            onExited: {
                                likeRect.scale = 1.0
                            }
                        }
                        // Q弹动画
                        Behavior on scale {
                            PropertyAnimation {
                                duration: 200
                                easing.type: Easing.OutBounce
                            }
                        }
                    }
                }
            }

            Text {
                text: "放轻松心情，可以发挥的更好哦！！！"
                font.pointSize: 9 * fontSizeFactor
                font.family: "MiSans"
                color: "#7D8592"
            }
        }
    }
}
